<!-- form表单，规则详解：https://www.cnblogs.com/kuki/p/15190259.html-->
<template>
  <div>
    <el-form ref="form" :model="form" label-width="180px">
      <el-form-item label="文件名称" required>
        <el-input
          type="input"
          v-model="form.name"
          class="textarea1111"
          placeholder="请输入文件名称（最多50字符）"
          @change="changeName"
        ></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          type="textarea"
          v-model="form.desc"
          class="textarea1111"
          placeholder="请输入描述（最多50字符）"
          @change="changeValue"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="submitCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { PopupCommon } from "@/libs/popupCommon";
export default {
  props: ["curDesc", "curName"],
  components: {},
  data() {
    return {
      form: {
        desc: "",
        name: "",
      },
    };
  },
  methods: {
    changeName(e) {
      if (e.length > 50) {
        this.form.name = e.substring(0, 50);
      }
    },
    changeValue(e) {
      if (e.length > 50) {
        this.form.desc = e.substring(0, 50);
      }
    },
    submitCancel() {
      this.$emit("submitCancel", "");
    },
    submitForm() {
      var desc = this.form.desc;
      var name = this.form.name;
      if (name == "") {
        PopupCommon.notify("info", `请填写文件名称`);
        return;
      }
      this.$emit("getData", {
        desc,
        name,
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.form.desc = this.curDesc;
      this.form.name = this.curName;
    });
  },
  destroyed() {},
};
</script>

<style>
.textarea1111 textarea {
  height: 100px;
}
</style>
